<template>
  <!-- 数据增长卡片 --><el-card>
    <div class="data">
      <el-icon><Histogram /></el-icon>
      数据增长
    </div>
    <div class="databox">
      <!-- 昨日活跃玩家 -->
      <div class="active-player">
        <p>昨日活跃玩家</p>
        <div class="number">5,334,960</div>
        <!-- 上升数据 -->
        <p style="height: 30px; line-height: 30px">
          日<img src="../assets/up.png" /> 12.5%
        </p>
        <!-- 下降数据 -->
        <p style="height: 30px; line-height: 30px">
          周<img src="../assets/down.png" /> 25%
        </p>
        <p style="height: 30px; line-height: 30px">
          月<img src="../assets/down.png" /> 30%
        </p>
      </div>
      <!-- 昨日消费元宝 -->
      <div class="consumer-ingots">
        <p>昨日消费元宝</p>
        <div class="number">45,394</div>
        <!-- 上升数据 -->
        <p style="height: 30px; line-height: 30px">
          日<img src="../assets/up.png" /> 12.5%
        </p>
        <!-- 下降数据 -->
        <p style="height: 30px; line-height: 30px">
          周<img src="../assets/down.png" /> 25%
        </p>
        <p style="height: 30px; line-height: 30px">
          月<img src="../assets/down.png" /> 30%
        </p>
      </div>

      <!-- 累计玩家 -->
      <div class="cumulative-player">
        <p>累计玩家</p>
        <div class="number">29,394,940</div>
        <!-- 上升数据 -->
        <p style="height: 30px; line-height: 30px">
          日<img src="../assets/up.png" /> 12.5%
        </p>
        <!-- 下降数据 -->
        <p style="height: 30px; line-height: 30px">
          周<img src="../assets/down.png" /> 25%
        </p>
        <p style="height: 30px; line-height: 30px">
          月<img src="../assets/down.png" /> 30%
        </p>
      </div>
    </div>
  </el-card>
  <!-- 游戏资源卡片 -->
  <el-card>
    <div class="data">
      <el-icon><StarFilled /></el-icon>
      游戏资源
    </div>
    <div>
      <div class="game-resource">
        <div class="number">30</div>
        <p>宠物</p>
      </div>
      <div class="game-resource">
        <div class="number">10</div>
        <p>道具</p>
      </div>
      <div class="game-resource">
        <div class="number">18</div>
        <p>装扮</p>
      </div>
      <div class="game-resource">
        <div class="number">21</div>
        <p>BOSS</p>
      </div>
    </div>
  </el-card>
  <!-- 当前活动卡片 -->
  <el-card>
    <div class="data">
      <el-icon><Promotion /></el-icon>
      当前活动
    </div>
    <div>
      <div class="current-activity">
        <div class="number">320</div>
        <p>未开始</p>
      </div>
      <div class="current-activity">
        <div class="number">130</div>
        <p>进行中</p>
      </div>
      <div class="current-activity">
        <div class="number">293040</div>
        <p>参与人数</p>
      </div>
    </div>
  </el-card>

  <!-- 其他信息 -->
  <el-card>
    <div class="data">
      <el-icon><Grid /></el-icon>
      其他信息
    </div>
    <div>
      <div class="orders-message">
        <div class="number">9</div>
        <p>待审核处罚</p>
      </div>
      <div class="orders-message">
        <div class="number">109</div>
        <p>用户反馈</p>
      </div>
      <div class="orders-message">
        <div class="number">1.02203</div>
        <p>当前版本</p>
      </div>
    </div>
  </el-card>
</template><script setup></script>
<style scoped>
.el-card {
  margin-bottom: 20px;
  padding-bottom: 30px;
}
.data {
  margin-bottom: 10px;
  color: rgb(44, 182, 156);
}

.number {
  font-size: 35px;
  display: inline;
  color: rgb(44, 182, 156);
}
.number:hover {
  color: #f8df70;
}
.active-player {
  float: left;
  width: 33%;
  text-align: center;

  box-shadow: inset -4px 0 0px rgba(0, 0, 0, 0.1);
}
.consumer-ingots {
  float: left;
  width: 33%;
  text-align: center;
  box-shadow: inset -4px 0 0px rgba(0, 0, 0, 0.1);
}
.cumulative-player {
  float: left;
  width: 33%;
  text-align: center;
}
.game-resource {
  float: left;
  width: 24%;
  text-align: center;
}
.current-activity {
  float: left;
  width: 33%;
  text-align: center;
}
.orders-message {
  float: left;
  width: 33%;
  text-align: center;
}
img {
  margin-left: 2px;
  width: 20px;
  height: 20px;
}
</style>
